<template>
  <view class="parking-container">
    <view class="main-container">
      <view class="user-container">
        <view class="avatar-container">
          <img :src="user.avatarUrl" alt="">
        </view>
        <view class="name-container">{{user.name}}</view>
        <view class="push-btn-container">
          <button size="default" class="push-btn" @click="toPayPage">查询缴费</button>
        </view>
      </view>
      <view class="action-container">
        <view class="action" @click="toListPage">
          <view class="icon-container">
            <img src="@/static/parking_slices/WechatIMG2014.png" alt="">
          </view>
          <view class="name-container">车牌列表</view>
        </view>
        <!--
        <view class="action" @click="toOrdersPage">
          <view class="icon-container">
            <img src="@/static/index_slices/icon_order@3x.png" alt="">
          </view>
          <view class="name-container">历史订单</view>
        </view>
        -->
        <view class="action" @click="toMinePage">
          <view class="icon-container">
            <img src="@/static/index_slices/icon_mine@3x.png" alt="">
          </view>
          <view class="name-container">个人中心</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script lang="ts">
import { token, user } from '@/util/storage'
import Vue from 'vue'
export default Vue.extend({
  computed: {
    user: () => JSON.parse(user.get()),
    redirect() {
      return encodeURI("/pages/parking/index");
    }
  },
  onLoad(option) {
    console.log("option3", option)
    if (option) {
      if (!!option.jump) {

      } else {
        location.href = '/#/pages/login/wechat?redirect=' + encodeURI('/pages/parking/index?jump=1');
      }
    }
  },
  mounted() {
/*    if (!token.get()) {
      location.href = "/#/pages/login/wechat?redirect=" + this.redirect;
      return;
    }*/
  },
  methods: {
    toBindPage() {
      location.href = "/#/pages/parking/plate";
    },
    toListPage() {
      location.href = "/#/pages/parking/list";
    },
    toMinePage() {
      location.href = "/#/pages/parking/mine";
    },
    toPayPage() {
      uni.navigateTo({
        url: "/pages/parking/select"
      });

      // this.$mainApi.apiGetCarNumberList().then((res) => {
      //   this.$mainApi.apiPayParkOrder(res.data.records[0].carNumber).then((result: any) => {
      //     console.log(result);
      //     if (!result) {
      //       console.log(1);
      //       uni.showToast({ title: "所有停车场未找到该车牌" });
      //       uni.navigateTo({
      //         url: "/pages/parking/select"
      //       });
      //       return;
      //     }
      //     console.log(0);
      //     location.href = result.data;
      //   });
      // });
    },
    toOrdersPage() {
      location.href = "/#/pages/parking/selectToOrder";
    }
  }
})
</script>
<style>
.parking-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header-container {
  color: #fff;
  height: 24px;
  padding: 15px;
  flex-shrink: 0;
  display: flex;
  background: #006b65;
}

.header-container .left,
.header-container .right {
  font-size: 16px;
  width: 100px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-container .center {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: auto;
  background-color: #f0f0f0;
}

.user-container {
  padding: 15px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

.user-container .avatar-container,.user-container .name-container,.user-container .push-btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.user-container .avatar-container img {
  width: 30vw;
  height: 30vw;
  border-radius: 15vw;
}

.user-container .push-btn-container {
  margin-top: 15px;
}

.user-container .push-btn-container .push-btn {
  color: #ffffff;
  font-size: 14px;
  background-color: #07c160;
  /*border-color: #33CC99;*/
}

.action-container {
  background-color: #fff;
  margin-top: 15px;
  display: flex;
}

.action-container .action {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: 5px;
}

.action-container .action .icon-container,.action-container .action .name-container {
  width: 100%;
  text-align: center;
}

.action-container .action .icon-container img {
  width: 10vw;
  height: 10vw;
}

.action-container .action .name-container {
  font-size: 14px;
}
</style>
